<template>
  <div class="weixin">
    <div class="weixinFuWu">
        <div class="head">
        <div class="head-left">
          <el-icon :size="15"><ArrowLeft /></el-icon>
        </div>
        支付
        <div class="head-right">
          <el-icon :size="15"><MoreFilled /></el-icon>
        </div>
        </div>
        <div class="money">
          <div class="money-left">
             <div class="moneyItem">
               <div class="moneyItem-icon">
    
               </div>
               <div>
                收付款
               </div>
             </div>
          </div>
          <div class="money-right">
            <div class="moneyItem">
               <div class="wallet">
               </div>
               <div style="margin-bottom: 5px;">
                钱包
               </div>
               <div>
               ￥521.72
               </div>
             </div>
          </div>
     
        </div>
        <div class="FuWu">
              <div class="FuWu-title" >
                 微信服务
              </div>
              <div class="FuWu-content">
                  <div class="FuWu-content-item" v-for="item in fuWuList" :key="item.id">
                  <img class="icon" :src="item.url"/>
                  {{ item.name }}
                  </div>
              </div>
          </div>
          <div class="FuWu">
              <div class="FuWu-title" >
                 限时推广
              </div>
              <div class="FuWu-content">
                  <div class="FuWu-content-item" v-for="(item) in tuiGuanList" :key="item.id">
                  <img class="icon" :src="item.url"/>
                  {{ item.name }}
                  </div>
              </div>
          </div>
  </div>
  </div>

</template>

<script lang="ts" setup>
const fuWuList = [
  {id: 0,
  url: new URL('@/assets/images/xinyong.png', import.meta.url).href,
  name: '信用卡还款'
  },  {id: 1,
  url: new URL('@/assets/images/weili.png', import.meta.url).href,
  name: '微粒贷借钱'
  },

  {id: 2,
  url: new URL('@/assets/images/shouji.png', import.meta.url).href,
  name: '手机充值'
  },
  {id: 3,
  url: new URL('@/assets/images/licai.png', import.meta.url).href,
  name: '理财通'
  },
  {id: 4,
  url: new URL('@/assets/images/shenghuo.png', import.meta.url).href,
  name: '生活缴费'
  },
  {id: 5,
  url: new URL('@/assets/images/chengshi.png', import.meta.url).href,
  name: '城市服务'
  },
  {id: 6,
  url: new URL('@/assets/images/gongyi.png', import.meta.url).href,
  name: '腾讯公益'
  },
  {id: 7,
  url: new URL('@/assets/images/yiliao.png', import.meta.url).href,
  name: '医疗健康'
  },
  {id: 8,
  url: new URL('@/assets/images/baoxian.png', import.meta.url).href,
  name: '保险服务'
  }
]
const tuiGuanList = [
  {id: 0,
  url: new URL('@/assets/images/jiankang.png', import.meta.url).href,
  name: '防疫健康码'
  }
]
</script>
<style scoped lang="scss">
 .weixin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  color: white;
  font-size: 10px;
  .weixinFuWu {
    width: 375px;
    height: 667px;
    padding: 5px;
    background-color: black;
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 30px;
      padding: 10px;
      margin-bottom: 5px;
    }
    .money {
      display: flex;
      justify-content: space-between;
      align-items: start;
      width: 100%;
      height: 120px;
      padding:30px 70px;
      border-radius: 5px;
      background-color: #3db372;
      margin-bottom: 10px;
      .moneyItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        &-icon {
          background: url('@/assets/images/Payment.png') no-repeat;
          background-size: 100% 100%;
          width: 25px;
          height: 20px;
          margin-bottom: 15px;
        }
      .wallet {
        background: url('@/assets/images/wallet.png') no-repeat;
        background-position: 0px -4px;
    background-size: 100% 100%;
    width: 34px;
    height: 31px;
    margin-bottom: 4px;
      }
      }
    }
    .FuWu {
      width: 100%;
      border-radius: 5px;
      background-color: #232323;
      color: #959396;
      margin-bottom: 10px;
      &-title {
    color: #535355;
    padding: 10px;
 
      }
      &-content {
        display: flex;
        flex-wrap: wrap;
        // padding: 20px;
        &-item { 
        display: flex;
        width: 33.3%;
        flex-direction: column;
        justify-content: start;
        align-items: center;
       margin: 25px 0;
       .icon {
          // background: url('@/assets/images/Payment.png') no-repeat;
          background-size: 100% 100%;
          width: 25px;
          height: 25px;
          margin-bottom: 15px;
        }
        }
      }
    }
  }
 }
</style>
